<template>
  <div class="layoutCon">
    <div class="totals">
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='newCount' :duration='3000' separator=','></countTo>
        <label>신규 인재정보</label>
      </div>
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='count' :duration='3000' separator=','></countTo>
        <label>누적 인재정보</label>
      </div>
    </div>
    <search-box type="recruitSearch" @search="searchCallBack"></search-box>
    <div class="jobList minH" v-loading="pageConfig.loading&&pageConfig.page==1">
      <div class="kws">
        총<b>{{localToThousands(totals)}}</b>건의 인재정보가 검색되었습니다.
      </div>
      <ul class="mt">
        <li v-for="(item,index) in searchData" :key="index">
          <div class="pic">
            <img :src="item.user&&item.user.uthumb?item.user.uthumb:defaultAvatar" class="avatar" :onerror="errorAvatar2">
          </div>
          <div class="info">
            <strong @click="showInfo(item.id,index)">{{item.application_scope}}</strong>
            <p class="t"><b>{{item.user&&formatName(item.user.name)}}</b> <span>({{item.user&&item.user.sex==1?'남':'여'}}, {{item.user&&item.user.age}})</span>
              <template v-if="item.job_age_year">
                  | 경력 {{item.job_age_year}}년 {{item.job_age_month}}개월
              </template>
            </p>
            <p v-html="item.jobs&&getJobs(item.jobs)"></p>
            <p class="v" v-html="item.areas&&getAdds(item.areas)"></p>
            <p class="v">
              <template v-if="item.highest_education&&item.highest_education.level">
                {{item.highest_education.level.value}}
              </template>
            </p>
          </div>
          <div class="bom">
            <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id,index)">자세히보기</a>
            <el-popconfirm
                v-if="item.collect"
                title="찜한공고에서 제거하시겠습니까?"
                confirmButtonText='확인'
                cancelButtonText='취소'
                iconColor="red"
                @onConfirm="collect(item,index)"
              >
                <a slot="reference" target="_self" href="javascript:;" class="btn ico_favo collect">찜하기</a>
            </el-popconfirm>
            <a v-else href="javascript:;" target="_self" class="btn ico_favo" @click="collect(item,index)">찜하기</a>
          </div>
        </li>
      </ul>
      <div class="notSerData" v-if="!this.pageConfig.loading&&searchData.length==0">
        <img src="@images/ico_search_not.png" alt="">
        <strong>검색결과가 없습니다.</strong>
        <p>모든 단어의 철자가 올바른지 확인하거나 다른 키워드로 검색해보세요. </p>
      </div>
    </div>
    <div class="loadMore" v-if="!pageConfig.isAll">
      <el-button type="primary" :loading="pageConfig.loading" @click="loadMore" class="btnMore">더보기</el-button>
    </div>
    <recruit-card :cardParams="cardData" :allJobs="allJobs" @close="closeCard" @changeCollect="changeCollect"></recruit-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { searchCV, myCvCollect } from '@/api';
import { toThousands, Local, removeNull } from "@/utils";
import countTo from 'vue-count-to'
import searchBox from '@/components/searchBox'
import recruitCard from '@/components/recruitCard'

export default {
  name:'',
  components:{countTo,searchBox,recruitCard},
  props:[],
  data(){
    return {
      keywords:'',
      searchData:[],
      newCount:0,
      count:0,
      allJobs:[],
      cardData:null,
      pageConfig:{
        page:1,
        per:20,
        loading:false,
        isAll:true
      },
      totals:0,
      frm:{},
      curIndex:null
    }
  },
  computed:{
    ...mapState(['errorAvatar2','defaultAvatar']),
  },
  created(){
    let serData=Local.get('rec_ser_data');
    if(serData){
      let _new=JSON.parse(JSON.stringify(serData.frm))
      if(Object.keys(_new).length !== 0){
        this.frm=removeNull(_new);
        this.searchCV();
      }
    }
  },
  mounted(){},
  methods:{
    getJobs(jobs){
      let _txt = "";
      jobs.length &&
        jobs.forEach((o, i) => {
          o.job1&&(_txt +=
            (i != 0 ? " , " : "") +
            o.job1.name +
            (o.job2 ? ">" + o.job2.name : "") +
            (o.job3 ? ">" + o.job3.name : ""));
        });
      return _txt;
    },
    getAdds(aras){
      let _txt = "";
      aras.length &&
        aras.forEach((o, i) => {
          o.area1&&(_txt +=
            (i != 0 ? " , " : "") +
            o.area1.name +
            (o.area2 ? ">" + o.area2.name : "") +
            (o.area3 ? ">" + o.area3.name : ""));
        });
      return _txt;
    },
    async searchCV(){
      if(this.frm.workYearsSearch&&this.pageConfig.page==1){
        this.frm.workYearsSearch=JSON.stringify(this.frm.workYearsSearch)
      }
      if(this.frm.ageSearch&&this.pageConfig.page==1){
        this.frm.ageSearch=JSON.stringify(this.frm.ageSearch)
      }
      if(this.frm.sexSearch&&this.pageConfig.page==1){
        this.frm.sexSearch=JSON.stringify(this.frm.sexSearch)
      }
      let _params={};
          _params=Object.assign({page:this.pageConfig.page,per:this.pageConfig.per},this.frm);
      this.pageConfig.loading=true;
      let res = await searchCV(_params);
      try {
        if(res.code==200){
          let _data=res.data.data;
          this.pageConfig.page+=1;
          this.searchData=this.searchData.concat(_data.data)
          this.newCount=res.data.newCount;
          this.count=res.data.count;
          this.totals=_data.total;
          !_data.next_page_url?(this.pageConfig.isAll=true):(this.pageConfig.isAll=false);
          this.pageConfig.loading=false;
        }else{
          this.pageConfig.loading=false;
        }
      } catch (error) {
        this.pageConfig.loading=false;
      }
    },
    loadMore(){
      !this.pageConfig.loading&&this.searchCV();
    },
    searchCallBack(data){
      this.pageConfig.page=1;
      this.pageConfig.isAll=true;
      this.searchData=[];
      this.frm=data;
      !this.pageConfig.loading&&this.searchCV();
    },
    showInfo(id,index){
      this.curIndex=index
      this.cardData={
        isShow:true,
        id:id
      }
    },
    changeCollect(status){
      this.searchData[this.curIndex].collect=status;
    },
    async collect(obj,index){
      let _status=1;
          obj.collect&&(_status=0)
      let res = await myCvCollect({cv_id:obj.id,status:_status});
      try {
        if(res.code==200){
          this.searchData[index].collect=_status;
        }
      } catch (error) {}
    },
    closeCard(){
      this.showCard=false
    },
    localToThousands(v){
      return toThousands(v);
    },
    formatName(name){
      return name.substr(0,1)+'**';
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/job.scss";
</style>
